*{
  margin:0;
  padding:0
}

.detail{
  position: relative;
  top:1.8rem;
  width:100%;
  height:100%;
  .box1{
    width:100%;
    min-height: 8.5rem;
    position: relative;
    // background: red
  }
  .d_left{
    width:3.3rem;
    height:5rem;
    float:left;
    margin-left:.35rem;
    // background: pink;
    .big_show{
      width:80%;
      height:3rem;
      margin:0 auto;
      border: 1px solid red;
      img{
        width:80%;
        height:2.5rem;
      }
    }
    .small_show{
      position: relative;
      width:80%;
      height:1rem;
      margin:.2rem auto 0;
      // border:1px solid green;
      overflow-x: scroll;
      overflow-y: hidden;
      ul{
        width:5rem;
        height:.9rem;
        display: inline-block;
        overflow: hidden;
        li{
          position: relative;
          left:0;
          float:left;
          margin:0 .12rem 0 .12rem;
          width:.7rem;
          height:.7rem;
          line-height: .7rem;
          list-style: none;
          overflow: hidden;
          &.active{
            border:2px solid rgb(107, 36, 102) ;
          }
          img{
            width:.7rem;
            height:.7rem;
          }
        }
      }
    }
  }
  .d_right{
    width:75%;
    height:5rem;
    position: absolute;
    left:3.8rem;
    // background: gray;
    .title{
      width:100%;
      height:2.6rem;
      font-size: .25rem;
      position: relative;
      // border:1px solid red;
      span{
        height: 0.5rem;
        line-height: .5rem;
        position: absolute;
        left:.7rem;
        font-size: .3rem;
        letter-spacing: 3px;
        color:rgb(107, 36, 102);
        // border:1px solid pink;
      }
      h6{
        height:.3rem;
        line-height: .3rem;
        position: absolute;
        left:.7rem;
        top:.6rem;
        font-size: .2rem;
        color:rgb(107, 36, 102);
        // border:1px solid yellow;
        }
        .p1{
          height:.3rem;
          color:#6f7697;
          font-size: .2rem;
          position: absolute;
          left:.7rem;
          top:1rem;
        }
        .p2{
          height:.3rem;
          color:#6f7697;
          font-size: .2rem;
          position: absolute;
          left:.7rem;
          top:1.4rem;
        }
        .p3{
          height:.3rem;
          color:#6f7697;
          font-size: .2rem;
          position: absolute;
          left:.7rem;
          top:1.8rem;
        }
        .p4{
          height:.3rem;
          color:#6f7697;
          font-size: .2rem;
          position: absolute;
          left:.7rem;
          top:2.2rem;
        }
    }
    .elect{
      width:100%;
      position: relative;
      top:-.3rem;
      .hole-item{
        font-size: .2rem;
        // background: red;
        margin-left:.6rem;
        color:#6f7697;
        .elent_son{
          margin-left:1.2rem;
        }
        .sales{
          width:80%;
          // background: yellow;
        }
        .cai{
          width:1.2rem;
          margin-top:.2rem;
          // background: green;
        }
        .xie{
          position: relative;
          top:.3rem;
        }
        .cun{
          position: relative;
          top:.3rem;
        }
        .se{
          position: relative;
          top:.3rem;
        }
        .kong{
          float:left;
          position: relative;
          width:.7rem;
          height:.35rem;
          color:black;
          list-style: none;
          margin:.05rem .1rem;
          padding:.05rem .1rem;
          border:1px solid black;
          cursor: pointer;
          border-radius: .08rem;
          &.active{
            background: rgb(107, 36, 102);
            color:white;
          }
        }
      }
    }
     .amount{
        position: relative;
        top:.5rem;
        left:0.6rem;
        color:#6f7697;
        font-size: .2rem;
        span{
          position: absolute;
          left:0
        }
        .purchase{
          position: absolute;
          left:1.3rem;
          outline: 0
        }
      }
      .jsons{
        width:40%;
        height:.7rem;
        // border:1px solid red;
        position: relative;
        top:1.5rem;
        left:.1rem;
        button{
          width:2.5rem;
          height:.65rem;
          background: rgb(107, 36, 102);
          border-radius: .1rem;
          border:none;
          outline: 0;
          cursor: pointer;
          position: absolute;
          // top:-.6rem;
          bottom:.2rem;
          // left:18%;
          img{
            position: relative;
            left:-.2rem;
          }
          span{
            position: relative;
            top:-.089rem;
            box-shadow: bisque;
            font-size: .2rem;
            color:white
          }
        }
      }
  }

}
.footer{
    width:100%;
    height:.6rem;
    font-size: .2rem;
    border-top:1px solid lightgray;
    li{
      width:20%;
      height:.6rem;
      line-height: .6rem;
      float:left;
      list-style: none;
      color: #6e769a;
      a{
        text-decoration: none;
        color: black;

      }
    }
  }
